<template>
  <div class="box">
    <div class="key">{{ label }}</div>
    <div class="value">{{ value }}</div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  /**
   * The label for the detail item.
   *
   * @type {String}
   * @default ''
   */
  label: {
    type: String,
    default: ''
  },
  /**
   * The value for the detail item.
   *
   * @type {String}
   * @default ''
   */
  value: {
    type: String,
    default: ''
  }
});
</script>

<style lang="less" scoped>
.box {
  display: flex;
  padding: 12px;
  font-size: 16px;
}
.key {
  color: #465a80;
  font-weight: 500;
  width: 40%;
  text-align: right;
}
.value {
  margin-left: 12px;
  font-weight: 400;
  width: 60%;
}
</style>
